<template>
    <div>
        <div class="box-head">
            <span v-for="(item, index) in tab":key="index" :class="cur == index ? 'act' : ''" @click="handle(index)">{{ item.head }}</span>
        </div>
        <div class="box-main">
            <div v-for="(item, index) in tab":key="index" :class="cur == index ? 'select': ''">{{ item.body }}</div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                 cur: 0,
               tab:[
               
                    {
                        head:"孙悟空",
                        body:"一二三四五"
                    },
                    {
                        head:"大闸蟹",
                        body:"上山打老虎"
                    },
                    {
                        head:"猪八戒",
                        body:"老虎打不着"
                    },
                    {
                        head:"锅包肉",
                        body:"打着小松鼠"
                    },
                ],
            }
        },
        methods:{
            handle(index){
                this.cur = index
            }
        },
    }
</script>
<style scoped lang="scss">
    .box-head{
        width: 300px;
        display: flex;
        span{
            width: 300px;
            height: 30px;
            background-color: pink;
        }
        .act{
            background-color: aqua;
        }
    }
    .box-main div{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 0 auto;
    }
</style>